<template>
  <div>
    <van-field
      label-width="9rem"
      label="拍号:"
      :value="this.ShowDataA.palletNo"
      readonly
    />
    <van-field
      label-width="9rem"
      label="物料号:"
      :value="this.ShowDataA.materialCode"
      readonly
    />
    <van-field
      label-width="9rem"
      label="生产日期:"
      :value="this.ShowDataA.prodDate"
      readonly
    />
    <van-field
      label-width="9rem"
      label="生产推荐使用期至:"
      :value="this.ShowDataA.BBD"
      readonly
    />
    <van-field
      label-width="9rem"
      label="供应商名称:"
      :value="this.ShowDataA.commerialVendor"
      readonly
    />
    <van-field
      label-width="9rem"
      label="生产商名称:"
      :value="this.ShowDataA.gsVendor"
      readonly
    />
    <van-field
      label-width="9rem"
      label="Mars批次:"
      :value="this.ShowDataA.batchCod"
      readonly
    />
    <van-field
      label-width="9rem"
      label="供应商批次:"
      :value="this.ShowDataA.vendorBatch"
      readonly
    />
    <!-- 单选框 -->
    <van-radio-group v-model="radio" direction="horizontal">
      <van-radio name="1" @click="yuanliao">原料</van-radio>
      <van-radio name="2" @click="baocai">包材</van-radio>
    </van-radio-group>
    <van-field
      label-width="9rem"
      v-model="valueKW"
      ref="kuwei"
      @focus="focus"
      label="库位:"
      clearable
      placeholder="请填写库位"
    />
    <!-- 需要输入的值 -->

    <van-field
      label-width="9rem"
      v-model="this.ShowDataA.quantity"
      label="数量:"
      readonly
    />
    <van-field
      label-width="9rem"
      v-model="this.ShowDataA.uom"
      label="单位:"
      readonly
    />

    <!-- 按键 -->
    <van-button type="info" block @click="handleSubmit">确定</van-button>
  </div>
</template>

<script>
import "vant/lib/index.less";
import { parseKuKwei } from "../untils/commion";
export default {
  name: "orderNumber",
  data() {
    return {
      radio: "1",
      valueKW: "",
      seatId: "", //库位ID
      // num: this.ShowDataA.quantity,
    };
  },
  props: {
    ShowDataA: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    ShowDataA() {
      setTimeout(() => {
        this.$refs.kuwei.focus();
      }, 300);
      // this.ShowDataA = val;
    },
    valueKW(val) {
      let newKuWei = parseKuKwei(val);
      this.seatId = newKuWei.kuWeiId;
      this.valueKW = newKuWei.kuWei;
    },
  },
  methods: {
    // 获取焦点时触发的方法
    focus() {
      // 获取焦点时阻止键盘弹出
      this.$refs.kuwei.$refs.input.setAttribute("readonly", "readonly");
      setTimeout(() => {
        this.$refs.kuwei.$refs.input.removeAttribute("readonly");
      }, 200);
    },
    handleSubmit() {
      if (this.valueKW) {
        if (this.seatId == "") {
          this.$toast("请采用二维码扫描");
          this.valueKW = "";
          return;
        } else {
          if (this.radio == 1) {
            this.$emit("get-val", this.valueKW);
            this.valueKW = "";
            this.seatId = "";
          } else if (this.radio == 2) {
            this.$emit("get-val", this.valueKW);
          }
        }
      } else {
        this.$emit("get-val", this.valueKW);
        this.seatId = "";
      }
    },
    yuanliao() {
      this.valueKW = "";
      this.seatId = "";
    },
    baocai() {
      this.valueKW = "";
      this.seatId = "";
    },
  },
  mounted() {
    setTimeout(() => {
      this.$refs.kuwei.focus();
    }, 300);
  },
};
</script>

<style scoped>
.van-field {
  border-bottom: 0.5px solid rgb(206, 204, 204);
  font-size: 1rem;
}
.van-button {
  margin-top: 2rem;
}
.van-radio-group {
  display: flex;
  justify-content: space-evenly;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
</style>